<template>
  <div class="header">
    <el-row type="flex" class="top" justify="space-between">
      <div>
        <nuxt-link to="/"><img class="logo" src="/logo.jpg" alt /></nuxt-link>
        
      </div>
      <div class="nav" type="flex">
        <nuxt-link to="/">首页</nuxt-link>
        <nuxt-link to="/post">旅游攻略</nuxt-link>
        <nuxt-link to="/hotel">酒店</nuxt-link>
        <nuxt-link to="/air">国内机票</nuxt-link>
      </div>
      <div class="right">
        <nuxt-link to="/user/login" v-if="!$store.state.user.userInfo.token">登录/注册</nuxt-link>
        <nuxt-link to="/user/login" v-else-if="$store.state.user.userInfo.token">
          <img
            class="head_img"
            :src="$axios.defaults.baseURL + $store.state.user.userInfo.user.defaultAvatar"
          />
          <!-- {{$store.state.user.userInfo.user.nickname}}
          -->
          <el-dropdown>
            <span class="el-dropdown-link">
              {{$store.state.user.userInfo.user.nickname}}
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </nuxt-link>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang='less'>
.top {
  width: 1000px;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  .logo {
    width: 90%;
  }
  .nav {
    flex: 1;
    margin: 0 20px;
    .nuxt-link-exact-active {
      background: #409eff;
      color: #fff;
      &:hover {
        color: #fff !important;
      }
    }
    a {
      display: inline-block;
      height: 60px;
      padding: 0 20px;
      box-sizing: border-box;
      &:hover {
        border-bottom: 5px solid #409eff;
        color: #409eff;
      }
    }
  }
}

.head_img {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  vertical-align: middle;
}
</style>